{% extends "base.html" %}

{% block title %}搜索 - 墨韵图书共享平台{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h1 class="display-4">搜索图书</h1>
        <form action="{{ url_for('search') }}" method="GET" class="row g-3">
            <div class="col-md-6">
                <input type="text" class="form-control" name="q" value="{{ query }}" placeholder="输入书名、作者或标签...">
            </div>
            <div class="col-md-4">
                <select class="form-select" name="category">
                    <option value="">所有分类</option>
                    {% for category in categories %}
                    <option value="{{ category.id }}" {% if category_id == category.id %}selected{% endif %}>
                        {{ category.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">搜索</button>
            </div>
        </form>
    </div>
</div>

{% if query or category_id %}
<div class="row">
    <div class="col">
        <h5 class="mb-3">
            搜索结果：
            {% if query %}关键词 "{{ query }}"{% endif %}
            {% if category_id %}分类 "{{ categories|selectattr('id', 'eq', category_id)|map(attribute='name')|first }}"{% endif %}
        </h5>
    </div>
</div>
{% endif %}

<div class="row row-cols-1 row-cols-md-3 g-4">
    {% for book in books.items %}
    <div class="col">
        <div class="card h-100 book-card">
            <div class="card-body">
                <h5 class="card-title">{{ book.title }}</h5>
                <h6 class="card-subtitle mb-2 text-muted">{{ book.author }}</h6>
                <p class="card-text">{{ book.description[:100] }}...</p>
                <div class="mb-2">
                    <span class="badge bg-primary">{{ book.category.name }}</span>
                    {% for tag in book.tags.split(',') %}
                    <span class="badge bg-secondary">{{ tag.strip() }}</span>
                    {% endfor %}
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <small class="text-muted">
                        <i class="fas fa-eye"></i> {{ book.views }} 次浏览
                    </small>
                    <div>
                        <button class="btn btn-outline-primary btn-sm favorite-btn" 
                                data-book-id="{{ book.id }}"
                                {% if book in current_user.favorite_books %}data-favorited="true"{% endif %}>
                            <i class="fas fa-heart"></i>
                        </button>
                        <a href="{{ url_for('view_book', book_id=book.id) }}" class="btn btn-primary btn-sm">
                            阅读
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-footer text-muted">
                上传于 {{ book.created_at.strftime('%Y-%m-%d') }}
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% if not books.items %}
<div class="text-center mt-5">
    <h3>未找到相关图书</h3>
    <p class="text-muted">请尝试其他关键词或分类</p>
</div>
{% endif %}

<!-- 分页 -->
{% if books.pages > 1 %}
<nav aria-label="Page navigation" class="mt-4">
    <ul class="pagination justify-content-center">
        {% if books.has_prev %}
        <li class="page-item">
            <a class="page-link" href="{{ url_for('search', page=books.prev_num, q=query, category=category_id) }}">上一页</a>
        </li>
        {% endif %}
        
        {% for page_num in books.iter_pages() %}
            {% if page_num %}
                <li class="page-item {% if page_num == books.page %}active{% endif %}">
                    <a class="page-link" href="{{ url_for('search', page=page_num, q=query, category=category_id) }}">{{ page_num }}</a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">...</span>
                </li>
            {% endif %}
        {% endfor %}

        {% if books.has_next %}
        <li class="page-item">
            <a class="page-link" href="{{ url_for('search', page=books.next_num, q=query, category=category_id) }}">下一页</a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const favoriteButtons = document.querySelectorAll('.favorite-btn');
    
    favoriteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const bookId = this.dataset.bookId;
            fetch(`/book/${bookId}/favorite`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    if (data.action === 'favorited') {
                        this.classList.add('active');
                        this.dataset.favorited = 'true';
                    } else {
                        this.classList.remove('active');
                        this.dataset.favorited = 'false';
                    }
                }
            });
        });
    });
});
</script>
{% endblock %} 